<template>
  <view class="content">
    <view class="content_top">
      <view class="content_top_haerd">
        <button type="default" class="content_top_haerd_loginbutton" v-if="userStore.userInfo?.logoImg">
          <image :src="userStore.userInfo?.logoImg" mode="aspectFill">
          </image>
        </button>
        <button type="default" v-else class="content_top_haerd_loginbutton" @click="decryptPhoneNumber">
          <image src="https://statics.lvpaizhijia.com/kefu/head.png" mode="aspectFill">
          </image>
        </button>
        <text class="text" v-if="userStore.userInfo?.id">ID:{{ userStore.userInfo?.id }}<text
            @click="copyId">复制</text></text>
        <view @click="getnavurl('information')" v-if="userStore.userInfo?.id">编辑资料</view>
      </view>
      <view class="content_top_title">
        <view class="content_top_title_name" v-if="userStore.userInfo?.nickName">{{ userStore.userInfo?.nickName
        }}</view>
        <view class="content_top_title_name" v-else @click="decryptPhoneNumber">点击登录</view>
        <view class="content_top_title_vip">
          <view class="content_top_title_vip_num">
            <text>积分 {{ userStore.userInfo?.punti }}</text>
          </view>
          <view class="content_top_title_vip_but" @click="getnavurl('amount')">去充值</view>
        </view>
      </view>
    </view>
    <view class="content_box">
      <button open-type="share" type="primary" class="no-border-btn">
        <image src="/static/tabs/fenxiang.png" class="icon" mode="scaleToFill" />
        <text>分享好友赚佣金</text>
      </button>
      <view @click="getbrokerage()">
        <image src="/static/tabs/jifen.png" class="icon" mode="scaleToFill" />
        <text>佣金信息</text>
        <image src="/static/tabs/more.png" class="goicon" mode="scaleToFill" />
      </view>
      <!-- <view @click="getopenchat">
        <image src="/static/tabs/kefu.png" class="icon" mode="scaleToFill" />
        <text>联系客服</text>
        <image src="/static/tabs/more.png" class="goicon" mode="scaleToFill" />
      </view> -->
      <button open-type="contact" type="primary" class="no-border-btn">
        <image src="/static/tabs/kefu.png" class="icon" mode="scaleToFill" />
        <text>联系客服</text>
        <image src="/static/tabs/more.png" class="goicon" mode="scaleToFill" />
      </button>
      <view @click="gocooperation">
        <image src="/static/tabs/hezuo.png" class="icon" mode="scaleToFill" />
        <text>商务合作</text>
        <image src="/static/tabs/more.png" class="goicon" mode="scaleToFill" />
      </view>
      <view @click="toPrivacypolicy">
        <image src="/static/tabs/tiaokuan.png" class="icon" mode="scaleToFill" />
        <text>使用条款</text>
        <image src="/static/tabs/more.png" class="goicon" mode="scaleToFill" />
      </view>
      <view @click="toAgreement">
        <image src="/static/tabs/yonghu.png" class="icon" mode="scaleToFill" />
        <text>用户协议</text>
        <image src="/static/tabs/more.png" class="goicon" mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onShow, onHide, onReady, onShareAppMessage } from "@dcloudio/uni-app"
import { useUserStore } from '@/stores'
import { GetUserInfo, WxUserLogin } from '@/api/user'
const userStore = useUserStore()
const demoSize = reactive({ //胶囊位置顶部距离和高度
  top: 0,
  height: 0
})
const threshold = ref() //滑动加载触发值
const state = reactive<any>({
  timeInter: null,//定义定时器
})
onLoad(() => {
  // 获取小程序右上角胶囊位置信息
  const demo = uni.getMenuButtonBoundingClientRect()
  demoSize.top = demo.top
  demoSize.height = demo.height
  threshold.value = (demo.top + demo.height) * 2 + 300 / 2
})
onShow(() => {

})
onHide(() => {
  clearInterval(state.timeInter)
  state.timeInter = null
})
onReady(() => {
  uni.showShareMenu({
    withShareTicket: true, // 是否开启带 shareTicket 的分享
  });
});
const getbrokerage = () => {
  if (!userStore.userInfo?.token) {
    uni.showToast({
      title: '请先登录～',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  uni.navigateTo({
    url: '/pages/brokerage/index',
  })
}

// 获取用户信息
const getUserInfo = async (obj: any) => {
  const res: any = await GetUserInfo()
  // const { result } = res.data[0]
  const result = { ...res.data, ...obj }
  userStore.setUserInfo(result)
}
const getnavurl = (type: any) => {
  if (!userStore.userInfo?.token) {
    uni.showToast({
      title: '请先登录～',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  if (type == 'amount') {
    uni.getSystemInfo({
      success: function (res) {
        if (res.platform === 'android') {
          uni.navigateTo({
            url: `/pages/${type}/index`
          })
        } else if (res.platform === 'ios') {
          uni.showToast({
            title: '请咨询客服获取积分',
            duration: 2000,
            icon: 'none'
          })
          return
        } else {
          uni.navigateTo({
            url: `/pages/${type}/index`
          })
        }
      },
      fail: function (err) {
        console.error('获取系统信息失败', err);
      }
    });
  } else {
    uni.navigateTo({
      url: `/pages/${type}/index`
    })
  }

}
const toPrivacypolicy = () => {
  uni.navigateTo({
    url: '/pages/privacypolicy/index'
  })
}
const toAgreement = () => {
  uni.navigateTo({
    url: '/pages/agreement/index'
  })
}
const gocooperation = () => {
  uni.navigateTo({
    url: '/pages/cooperation/index'
  })
}
// 登陆
const decryptPhoneNumber = () => {
  let ids = wx.getStorageSync('scene');
  uni.login({
    provider: 'weixin',
    success: async function (loginRes) {
      if (!loginRes || !loginRes.code) {
        return
      }
      try {
        const res: any = await WxUserLogin({ code: loginRes.code, scene: ids })
        if (res.code == 0) {
          userStore.setUserInfo(res.data)
          getUserInfo(res.data)
          wx.removeStorageSync('scene');
        } else {
          console.error('User login failed:', res)
        }
      } catch (error) {
        console.error('Error during user login:', error)
      }
    },
    fail: function (err) {
      console.error('Login failed:', err)
    }
  })
}
const copyId = () => {
  wx.setClipboardData({
    data: `${userStore.userInfo.id}`,  // 设置需要复制的内容
    success: function (res) {
      wx.showToast({
        title: '复制成功！',
        icon: 'success',
        duration: 2000
      });
    },
    fail: function (err) {
      console.log(err);

      wx.showToast({
        title: '复制失败！',
        icon: 'none',
        duration: 2000
      });
    }
  });
}
onShareAppMessage(() => {
  return {
    title: '一键AI换脸！效果简直惊呆我了...',
    path: `/pages/home/index?id=${userStore.userInfo?.id}`,
    imageUrl: 'https://statics.lvpaizhijia.com/img/1745290957532.jpg'
  }
})
const handleShare = () => {
  wx.showShareMenu({
    withShareTicket: true
  })
}
</script>
<style lang="scss">
page {
  background: #F7F7F7;
}

.scroll-Y {
  height: 100vh;
}

.content {

  /* 定义关键帧动画 */
  @keyframes popUp {
    from {
      bottom: -355rpx;
      /* 初始位置 */
      opacity: 0;
      /* 初始透明度 */
    }

    to {
      bottom: 0;
      /* 目标位置 */
      opacity: 1;
      /* 目标透明度 */
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      /* 开始时元素完全透明 */
    }

    to {
      opacity: 1;
      /* 动画结束时元素不透明 */
    }
  }

  &_top {
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    // background-image: url('https://statics.aidachuang.com/DaChuang/img2024-09-09/1725850819476.jpg');
    // background-image: url('https://statics.lvpaizhijia.com/img/1745285966153.jpg');
    background-image: url('https://statics.lvpaizhijia.com/img/1746689038507.jpg');

    &_haerd {
      height: 192rpx;
      position: relative;
      padding-top: 210rpx;
      background-size: 100%;
      background-position: bottom;
      background-repeat: no-repeat;
      background-image: url('https://statics.lvpaizhijia.com/img/1746689289958.jpg');

      &_loginbutton {
        width: 189rpx;
        height: 189rpx;
        border-radius: 50%;
        margin-left: 48rpx;
        border: 4rpx solid #FFFFFF;
        padding: 0 !important;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: contain;
        }
      }

      .text {
        position: absolute;
        bottom: 12rpx;
        left: 240rpx;

        text {
          padding: 0 10rpx;
          font-size: 28rpx;
          border: 1rpx solid #ccc;
          border-radius: 15rpx;
          margin-left: 10rpx;
        }
      }

      view {
        position: absolute;
        bottom: 12rpx;
        right: 40rpx;
        width: 190rpx;
        height: 72rpx;
        border-radius: 36rpx;
        border: 2rpx solid #222222;
        text-align: center;
        line-height: 72rpx;
      }
    }

    &_title {
      padding-bottom: 20rpx;
      background: #F7F7F7;

      &_name {
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
        font-weight: 600;
        padding-top: 20rpx;
        margin-left: 26rpx;
        width: 240rpx;
        display: block;
        text-align: center;
      }

      &_vip {
        width: 686rpx;
        height: 112rpx;
        margin-left: 32rpx;
        margin-top: 36rpx;
        position: relative;
        background-size: 100%;
        background-position: top;
        background-repeat: no-repeat;
        background-image: url('https://statics.lvpaizhijia.com/img/1746689360516.jpg');

        &_num {
          position: absolute;
          top: 32rpx;
          left: 60rpx;
          font-weight: 500;
          font-size: 30rpx;
          color: #563F30;
          line-height: 42rpx;
          display: flex;
          align-items: center;

          image {
            width: 32rpx;
            height: 28rpx;
            margin-right: 10rpx;
          }
        }

        &_but {
          width: 128rpx;
          height: 56rpx;
          background: linear-gradient(180deg, #563F30 0%, #563F30 100%);
          border-radius: 36rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #FFEEE3;
          line-height: 56rpx;
          position: absolute;
          top: 24rpx;
          right: 60rpx;
          text-align: center;
        }
      }
    }

  }

  &_top2 {
    width: 100%;
    position: fixed;
    top: 0;
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-image: url('https://statics.aidachuang.com/DaChuang/img2024-09-09/1725850819476.jpg');
    // display: flex;
    // justify-content: space-evenly;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    animation: fadeIn 0.5s ease-in-out;

    &_info {
      display: flex;
      align-items: center;

      view {
        display: flex;
        align-items: center;
        margin: auto;

        image {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        text {
          color: #fff;
          display: block;
        }
      }
    }

    &_nav {
      margin-top: 42rpx;
      padding-top: 32rpx;
      display: flex;
      background: #F7F7F7;
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      padding-bottom: 10rpx;

      &_item {
        width: 145rpx;
        margin-left: 32rpx;
        margin-right: 70rpx;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-evenly;

        view {
          font-weight: 400;
          font-size: 32rpx;
          color: #888888;
          line-height: 44rpx;
        }

        image {
          width: 20rpx;
          height: 4rpx;
          margin-top: 4rpx;
        }

        .active {
          font-weight: 600;
          font-size: 34rpx;
          color: #222222;
          // line-height: 50rpx;
        }
      }
    }
  }

  &_box {
    width: 100%;
    // border-radius: 40rpx 40rpx 0rpx 0rpx;
    background: #F7F7F7;

    .no-border-btn {
      width: calc(100% - 64rpx);
      height: 110rpx;
      border: none;
      line-height: 1;
      padding: 0;
      background-color: transparent;

      .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10rpx;
        width: 40rpx;
        height: 40rpx;
      }

      text {
        font-size: 32rpx;
        color: #222222;
        line-height: 110rpx;
        position: absolute;
        left: 68rpx;
      }

      .goicon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10rpx;
        width: 16rpx;
        height: 24rpx;
      }
    }

    .no-border-btn::after {
      border: none;
    }

    view {
      width: calc(100% - 64rpx);
      height: 110rpx;
      // border-bottom: 1rpx solid #E5E5E5;
      margin: auto;
      position: relative;

      .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10rpx;
        width: 40rpx;
        height: 40rpx;
      }

      text {
        font-size: 32rpx;
        color: #222222;
        line-height: 110rpx;
        position: absolute;
        left: 70rpx;
      }

      .goicon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10rpx;
        width: 16rpx;
        height: 24rpx;
      }
    }
  }
}
</style>
